【隨堂筆記】JavaScript 網頁應用


  • JavaScript :直譯式語言,宿主語言(需要瀏覽器才可以執行)
    p.s. Chrome 可直接執行 JavaScript,一般使用文字編輯器進行撰寫
  • JavaScript 可用一般文字編輯器編輯使用
    嵌入方式:
    (1) HTML標籤中
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>demo</title>
    </head>
    <body>
        <!--
        在 HTML 中直接撰寫程式碼,包裹在 script 標籤中
        -->
      <script>
          <!-- 類似 Python print() 印出內容於終端機畫面上 -->
          console.log('hello world:)');
      </script>
    </body>
    </html>
    
    (2) 外部引入檔案
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>demo</title>
    </head>
    <body>
      <!-- 外部引入獨立 .js 檔案,./ 代表同一個資料夾下的檔案 -->
      <script src="./main.js"></script>
    </body>
    </html>
    
  • 變數
    let 變數名稱
    
  • 常數
    const 常數名稱
    
  • 單行註解
    // 單行註解
    
  • 多行註解
    /*
    多行註解
    */
    
  • ```
    // 數值(整數)
    console.log(typeof(1));
    // 數值(浮點數)
    console.log(typeof(1.2));
    // 布林
    console.log(typeof(true));
    // 字串
    console.log(typeof('str'));
    // 空值,視為物件
    console.log(typeof(null));
    // 沒有被定義的變數
    console.log(typeof(undefined));

/
number
number
boolean
string
object
undefined
/

**p.s. JavaScript 比較運算子值和資料型別皆相等為 ===,若使用 == 代表不一定要同資料型別**

// true
console.log('2' == 2);
// false
console.log('2' === 2);

* 陣列 vs 物件
陣列:存放多個資料

let languages = ['Java', 'Python', 'C++', 21, true];

// ['Java', 'Python', 'C++', 21, true]
console.log(languages);

物件:存放更詳細的資

const language = {
name: 'Jack',
age: 20,
languages: ['Chinese', 'English']
};

// Jack
console.log(language.name);
// 20
console.log(language.age);
// Chinese
console.log(language.languages[0]);

* DOM API(Document Object Model):文件物件模型,是用於使用物件方式操作瀏覽器的方式

My Title

A heading

Link text
`` html 下有 head 和 body 元素 head 下有 title 元素,title 元素有文字內容 body 下有 h1 元素和 a 超連結元素,h1 元素有文字內容,a 有文字內容和屬性 href **p.s. 大部分節點元素有屬性也有文字內容,元素節點有階層`之分

  • 在 JavaScript 常見的事件有:
    滑鼠:click 點擊
    鍵盤:keydown 按下鍵盤按鈕
    更多事件可以參考文件說明






你可能感興趣的文章

What Type of Laser Engraving Machine Should be Used for Stainless Steel Engraving?

What Type of Laser Engraving Machine Should be Used for Stainless Steel Engraving?

留言板 plugin

留言板 plugin

6. Singleton

6. Singleton






留言討論